import React, { useState } from "react";
import { Tabs } from "antd";
import { useSearchParams } from "react-router-dom";
import PlanetImageUpload from "../components/GISDetail/PlanetImageUpload";
import LocationManagement from "../components/GISDetail/LocationManagement";
import DataAreaManagement from "../components/GISDetail/DataAreaManagement";
import DetectionManagement from "../components/GISDetail/DetectionManagement";
import Breadcrumb from "../components/Breadcrumb";
import "./DataManagement.css";

const GISDetail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const planetId = searchParams.get("id");
  const [activeTab, setActiveTab] = useState("image");

  if (!planetId) {
    return <div>星球ID不存在</div>;
  }

  const items = [
    {
      key: "image",
      label: "星球底图",
      children: <PlanetImageUpload planetId={Number(planetId)} />,
    },
    {
      key: "location",
      label: "地名管理",
      children: <LocationManagement planetId={Number(planetId)} />,
    },
    {
      key: "area",
      label: "空间数据管理",
      children: <DataAreaManagement planetId={Number(planetId)} />,
    },
    {
      key: "point",
      label: "探测点管理",
      children: <DetectionManagement planetId={Number(planetId)} />,
    },
  ];

  return (
    <div className="data-management-container">
      <div style={{ position: "absolute", width: "100%", display: "flex", flexDirection: "column", height: "100%" }}>
        <Breadcrumb text="GIS详情编辑" />

        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          style={{
            flex: 1,
            background: "white",
            padding: 16,
            borderRadius: 4,
          }}
          items={items}
        />
      </div>
    </div>
  );
};

export default GISDetail;
